<template>
  <div class="">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>
          <el-button icon="el-icon-arrow-left" @click="back">
           返回
          </el-button>
        </span>
        <span style="padding-left: 20px">{{title()}}</span>
      </div>
      <div class="text item">
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-tabs v-model="activeName" >
            <el-tab-pane label="基本信息" name="1">
              <el-form-item label="ID" prop="">
                <el-input v-model="ruleForm.id" readonly></el-input>
              </el-form-item>
              <el-form-item label="价格￥" prop="">
                <el-input v-model="ruleForm.package.price" readonly></el-input>
              </el-form-item>
              <el-form-item label="已买数量" prop="">
                <el-input v-model="ruleForm.sum_number" readonly></el-input>
              </el-form-item>
              <el-form-item label="过期时间" prop="">
                <el-tag type="success" v-if="getTimeDifference(ruleForm.sum_valid_time) > 15">{{ruleForm.sum_valid_time}}</el-tag>
                <div style="color: red" v-if="getTimeDifference(ruleForm.sum_valid_time) <= 15 && getTimeDifference(ruleForm.sum_valid_time) > 0">
                  {{ruleForm.sum_valid_time}}【即将过期，请及时续费，还有{{getTimeDifference(ruleForm.sum_valid_time)}}天过期】
                </div>
                <div style="color: red" v-if="getTimeDifference(ruleForm.sum_valid_time) <= 0">
                  {{ruleForm.sum_valid_time}}【已经过期，请及时续费】
                </div>
              </el-form-item>
            </el-tab-pane>
            <el-tab-pane label="套餐信息" name="2">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>{{ruleForm.package.title}}</span>
                </div>
                <div style="padding: 5px">
                  <div style="text-align: center;padding: 5px;">
                    <el-row>
                      <el-col :span="4">支持</el-col>
                      <el-col :span="16" style="text-align: left">功能</el-col>
                      <el-col :span="4">单位</el-col>
                    </el-row>
                  </div>

                  <div v-for="function_item in ruleForm.package['package_functions']" style="padding: 5px;text-align: center">
                    <el-row>
                      <el-col :span="4">
                        <i class="el-icon-check" v-if="function_item.extend.package_package_function_status"></i>
                        <i class="el-icon-close" v-if="!function_item.extend.package_package_function_status"></i>
                      </el-col>
                      <el-col :span="16" style="text-align: left">{{function_item.title}}</el-col>
                      <el-col :span="4">{{function_item.extend.quantity}}{{function_item.extend.unit}}</el-col>
                    </el-row>
                  </div>
                </div>
              </el-card>
            </el-tab-pane>
          </el-tabs>

        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getOrderPackageInfo } from '@/api/order'
export default {
  name: 'OrderPackageEdit',
  components: { },
  data() {
    return {
      ruleForm: {
        package: {}
      },
      rules: {
      },
      activeName: '1',
      id: ''
    }
  },
  created() {
    this.id = this.$route.params && this.$route.params.id
    this.onInfo()
  },
  methods: {
    back() {
      this.$router.go(-1)
    },
    title() {
      return '套餐详情'
    },
    onInfo() {
      getOrderPackageInfo(this.id).then(res => {
        this.ruleForm = res
      })
    },
    getTimeDifference(sumValidTime) {
      var date1 = new Date(sumValidTime)
      var date2 = new Date() // 当前日期
      if (date1 < date2) {
        return 0
      }

      // 计算两个日期之间的毫秒数差值
      var timeDifference = Math.abs(date1 - date2)
      var daysDiff = Math.floor(timeDifference / (24 * 60 * 60 * 1000))
      console.log('两个日期相隔' + daysDiff + '天')

      return daysDiff
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
